<template>
    <el-dialog v-model="dialogVisible" v-bind="$attrs"  draggable :fullscreen="fullscreen" :append-to-body="true" :destroy-on-close="true" :close-on-click-modal="false" :dragable="true" :width="width" max-width="90%">
        <template #header>
            <slot name="title"/>
            <!-- <el-button class="el-dialog__headerbtn mr20">
                <el-icon class="el-iconfont" :class="!fullscreen ? 'icon-fullscreen' : 'icon-tuichuquanping'"  @click="fullscreen=!fullscreen">
                    <ele-FullScreen v-if="!fullscreen"/>
                </el-icon>
            </el-button> -->
            
        </template>
        <div>
            <slot></slot>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <vp-btn-cancel v-if="showCancel"  @click="dialogVisible = false"/>
                <slot name="footer"></slot>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts">
import { toRefs, reactive, defineComponent, onMounted } from 'vue';
export default defineComponent({
	name: 'dragDialog',
    props:{
        span:{
            type: Number,
            default: 4,
        },
        showCancel:{
            type: Boolean,
            default: true,
        }
    },
	setup(props) {
		const state = reactive({
			dialogVisible: false,
            fullscreen: false,
            width: '769px',
		});
        const handleOpen = ()=>{
            state.dialogVisible = true;
        }
        const handleClose = ()=>{
            state.dialogVisible = false;
        }
        onMounted(()=>{
            switch(props.span){
                case 2: 
                    state.width= '70%';
                    break;
                case 1:
                    state.width= '50%';
                    break;
                default:
                    state.width = '90%';
            }
        })

		return {
			...toRefs(state),
            handleOpen,
            handleClose,
		};
	},
});
</script>
<style lang="scss" scoped>
:deep(.el-dialog__body){
    border-top: var(--el-border);
    border-bottom: var(--el-border);
}
</style>